<template>
  <div class="container">
    <Breadcrumb :items="['menu.dashboard', 'menu.dashboard.workplace']" />
    
    <!-- 上半部分：数据概览和折线图 -->
    <a-row :gutter="16" class="mt-16">
      <!-- 数据概览区域 -->
      <a-col :span="12">
        <a-card class="general-card overview-card">
          <!-- 欢迎语 -->
          <div class="welcome-wrap">
            <a-typography-title :heading="5" style="margin: 0">
              {{ $t('workplace.welcome') }} {{ userInfo.name }}
            </a-typography-title>
          </div>

          <a-row :gutter="[32, 32]">
            <a-col v-for="(item, index) in statistics" :key="index" :span="12">
              <a-card class="data-card" :bordered="false" :loading="loading">
                <div class="data-card-content">
                  <div class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
                    <img :src="item.icon" :alt="$t(item.title)" class="stat-icon" />
                  </div>
                  <div class="data-info">
                    <span class="card-title">{{ $t(item.title) }}</span>
                    <div class="data-value">
                      <a-statistic 
                        :value="item.value" 
                        :precision="item.precision"
                        animation
                      >
                        <template #suffix>
                          <span v-if="item.suffix">{{ item.suffix }}</span>
                        </template>
                      </a-statistic>
                    </div>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <!-- 折线图区域 -->
      <a-col :span="12">
        <a-card class="general-card trend-card">
          <DataTrend />
        </a-card>
      </a-col>
    </a-row>

    <!-- 表格区域 -->
    <a-row :gutter="16" class="mt-16">
      <a-col :span="12">
        <a-card class="general-card">
          <ShopList />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="general-card">
          <TeamList />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/store';
import { getStatistics } from '@/api/dashboard';
import type { StatisticsData } from '@/api/dashboard';
import DataTrend from './components/data-trend.vue';
import ShopList from './components/shop-list.vue';
import TeamList from './components/team-list.vue';

const { t } = useI18n();
const { userInfo } = useUserStore();
const loading = ref(false);
const statisticsData = ref<StatisticsData>({
  user_number: 0,
  shop_number: 0,
  receive_number: 0,
  profit_number: 0,
});

// 获取统计数据
const fetchStatistics = async () => {
  try {
    loading.value = true;
    const response = await getStatistics();
    statisticsData.value = response.data;
  } catch (error) {
    console.error('获取统计数据失败:', error);
  } finally {
    loading.value = false;
  }
};

const statistics = computed(() => {
  if (!statisticsData.value) return [];
  
  return [
    {
      title: t('workplace.totalSales'),
      value: statisticsData.value.receive_number || 0,
      precision: 2,
      suffix: `${t('workplace.unit.yuan')}`,
      icon: 'https://jsxm.scwfkj.cn/images/uploads/202411071637242628.svg',
      color: '#0FC6C2',
      bgColor: 'rgba(15, 198, 194, 0.1)'
    },
    {
      title: t('workplace.totalProfit'),
      value: statisticsData.value.profit_number || 0,
      precision: 2,
      suffix: `${t('workplace.unit.yuan')}`,
      icon: 'http://rtt.scwfkj.cn/images/uploads/202501041933388745.png',
      color: '#165DFF',
      bgColor: 'rgba(22, 93, 255, 0.1)'
    },
    {
      title: t('workplace.totalFans'),
      value: statisticsData.value.user_number || 0,
      precision: 0,
      suffix: t('workplace.unit.person'),
      icon: 'http://rtt.scwfkj.cn/images/uploads/202501041934369048.svg',
      color: '#FF7D00',
      bgColor: 'rgba(255, 125, 0, 0.1)'
    },
    {
      title: t('workplace.totalShops'),
      value: statisticsData.value.shop_number || 0,
      precision: 0,
      suffix: t('workplace.unit.shop'),
      icon: 'http://rtt.scwfkj.cn/images/uploads/202501041937298155.svg',
      color: '#722ED1',
      bgColor: 'rgba(114, 46, 209, 0.1)'
    },
  ];
});

onMounted(() => {
  fetchStatistics();
});
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

.mt-16 {
  margin-bottom: 16px;
}

.welcome-wrap {
  padding: 20px 0;
}

.data-card {
  :deep(.arco-card-body) {
    padding: 24px;
  }

  .data-card-content {
    display: flex;
    align-items: center;
    gap: 20px;

    .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 12px;
      flex-shrink: 0;

      .stat-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }
    }

    .data-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .card-title {
        font-size: 15px;
        color: var(--color-text-2);
      }

      .data-value {
        :deep(.arco-statistic) {
          .arco-statistic-value {
            font-size: 26px;
            font-weight: 500;
            color: var(--color-text-1);
            line-height: 1.2;
          }
          
          .arco-statistic-suffix {
            font-size: 15px;
            margin-left: 8px;
            color: var(--color-text-2);
          }
        }
      }
    }
  }
}

.overview-card,
.trend-card {
  height: 280px;
  
  :deep(.arco-card-body) {
    height: calc(100% - 20px);
    padding: 0 20px 20px;
  }
}

.overview-card {
  .welcome-wrap {
    padding: 20px 0;
  }

  :deep(.arco-row) {
    margin: 0 -12px;
  }
}

.trend-card {
  :deep(.trend-wrapper) {
    height: 100%;
    
    .chart-container {
      height: calc(100% - 60px);
    }
  }
}
</style> 